<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>换班管理</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/left::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body" id="app">
        <template>
            <div style="width: 1500px;margin:auto;">
                <el-table
                        :data="data"
                        style="width: 100%">
                    <el-table-column
                            prop="changeId"
                            label="申请编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="changeApplyName"
                            label="申请人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="changeNowDate"
                            label="原值班时间">
                    </el-table-column>
                    <el-table-column
                            prop="changeNewDate"
                            label="现换班时间">
                    </el-table-column>
                    <el-table-column
                            prop="replaceName"
                            label="被换班人">
                    </el-table-column>
                    <el-table-column
                            prop="changeReason"
                            label="换班原因">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="buttonExamine(scope.$index, scope.row.changeId)"> 审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </template>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>

<script type="text/babel">
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
        el:"#app",
        data:{
            data:[]
        },
        created: function() {

        },
        mounted(){
            this.getChangeWork();
        },
        methods: {
            //查询换班表
            getChangeWork(){
                var _this = this;
                axios.get("http://localhost:8443/get_change_work").then(function (response) {
                    console.log(response.data);
                    _this.data = response.data;
                },function (err) {
                    console.log(err);
                })
            },
            //审核
            buttonExamine(index,changeId){
                var _this = this;
                axios.get("http://localhost:8443/examine/"+changeId).then(function (response) {
                    _this.getChangeWork();
                },function (err) {
                    console.log(err);
                })
            }
        }
    })
</script>
</body>
</html>